<!--
 * @Description: 我的信息页面组件
 * @Author: hai-27
 * @Date: 2020-02-20 17:21:54
 * @LastEditors: 张家亮 1690608011@qq.com
 * @LastEditTime: 2022-08-28 22:19:38
 -->
<template>
    <div class="collect">
        <div class="collect-header">
            <div class="collect-title">
                <i class="el-icon-user" style="color: #ff6700;"></i>
                我的信息
            </div>
        </div>
        <el-row>
            <el-col :span="20" :offset="3">
                <el-tabs tab-position="left" style="margin-top: 40px;">
                    <el-tab-pane label="基本信息">
                        <el-row>
                            <el-col :span="8">
                                <el-form :model="user" :rules="rules" ref="user" label-width="100px">
                                    <el-form-item label="手机号" prop="userPhoneNumber">
                                        <el-input clearable v-model="user.userPhoneNumber"></el-input>
                                    </el-form-item>
                                    <el-form-item label="年龄" prop="age">
                                        <el-input clearable v-model="user.age">
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item label="性别">
                                        <el-radio-group v-model="user.sex">
                                            <el-radio label="男"></el-radio>
                                            <el-radio label="女"></el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item label="个人签名">
                                        <el-input type="textarea" :rows="3" v-model="user.personal_sign">
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" plain round="true" @click="updateUserInfo">提交修改
                                        </el-button>
                                    </el-form-item>
                                </el-form>
                            </el-col>
                            <el-col :span="12" :offset="4">
                                <el-alert title="警告" type="warning" description="个人信息可以随意更改哦" show-icon>
                                </el-alert>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="账号安全">
                        <el-row>
                            <el-col :span="8">
                                <el-form :model="updateUser" status-icon ref="updateUser" :rules="rules"
                                    label-width="100px">
                                    <el-form-item label="旧密码" prop="password">
                                        <el-input type="password" clearable v-model="updateUser.password"></el-input>
                                    </el-form-item>
                                    <el-form-item label="新密码" prop="newPassword">
                                        <el-input type="password" clearable v-model="updateUser.newPassword"></el-input>
                                    </el-form-item>
                                    <el-form-item label="确认密码" prop="checkNewPass">
                                        <el-input type="password" clearable v-model="updateUser.checkNewPass">
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" plain round="true" @click="updatePassword">提交修改
                                        </el-button>
                                    </el-form-item>
                                </el-form>
                            </el-col>
                            <el-col :span="12" :offset="4">
                                <el-alert title="警告" type="warning" description="请一定牢记密码！" show-icon>
                                </el-alert>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import { mapActions } from "vuex";
export default {
    data() {
        // 手机号码的校验方法
        let validateuserPhoneNumber = (rule, value, callback) => {
            // 长度为11之间,只允许数字
            let PhoneNumberRule = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
            if (value === '') {
                return callback(new Error("请输入手机号"));
            }
            else if (PhoneNumberRule.test(value)) {
                this.$refs.user.validateField("age");
                return callback();
            }
            else {
                return callback(new Error("号码格式不正确"));
            }
        };
        // 年龄的校验方法
        let validateAge = (rule, value, callback) => {
            let AgeRule = /^(?:[1-9][0-9]?|1[01][0-9]|120)$/;//年龄是1-120之间有效
            if (value === '') {
                return callback(new Error("请输入年龄"));
            }
            else if (AgeRule.test(value)) {
                return callback();
            }
            else {
                return callback(new Error("格式不正确"));
            }
        };
        // 旧密码的校验方法
        let validatePass = (rule, value, callback) => {
            // 密码以字母开头,长度在6-18之间,允许字母数字和下划线
            let passwordRule = /^[a-zA-Z]\w{5,17}$/;
            if (value === '') {
                return callback(new Error("请输入旧密码"));
            }
            else if (passwordRule.test(value)) {
                this.$refs.updateUser.validateField("newPassword");
                return callback();
            }
            else {
                return callback(new Error("字母开头,长度6-18之间,允许字母数字和下划线"));
            }
        };
        // 新密码的校验方法
        let validateNewPass = (rule, value, callback) => {
            // 密码以字母开头,长度在6-18之间,允许字母数字和下划线
            let passwordRule = /^[a-zA-Z]\w{5,17}$/;
            if (value === '') {
                callback(new Error('请输入新密码'));
            }
            else if (value === this.updateUser.password) {
                callback(new Error('新密码与旧密码相同，请更换'));
            }
            else if (passwordRule.test(value)) {
                this.$refs.updateUser.validateField('checkNewPass');
                callback();
            }
            else {
                return callback(new Error("字母开头,长度6-18之间,允许字母数字和下划线"));
            }
        };
        // 确认新密码的校验方法
        let validateCheck = (rule, value, callback) => {
            // 密码以字母开头,长度在6-18之间,允许字母数字和下划线
            let passwordRule = /^[a-zA-Z]\w{5,17}$/;
            if (value === '') {
                callback(new Error('请再次输入新密码'));
            }
            else if (value !== this.updateUser.newPassword) {
                callback(new Error('两次输入新密码不一致!'));
            }
            else if (passwordRule.test(value)) {
                callback();
            }
            else {
                return callback(new Error("字母开头,长度6-18之间,允许字母数字和下划线"));
            }
        };
        return {
            user: {
                userPhoneNumber: '',
                age: '',
                sex: '',
                personal_sign: '',
            },
            updateUser: {
                password: '',
                newPassword: '',
                checkNewPass: '',
            },
            rules: {
                userPhoneNumber: [
                    { validator: validateuserPhoneNumber, trigger: 'blur' }
                ],
                age: [
                    { validator: validateAge, trigger: 'blur' }
                ],
                password: [
                    { validator: validatePass, trigger: 'blur' }
                ],
                newPassword: [
                    { validator: validateNewPass, trigger: 'blur' }
                ],
                checkNewPass: [
                    { validator: validateCheck, trigger: 'blur' }
                ],
            },
        };
    },
    methods: {
        ...mapActions(["setUser"]),
        updateUserInfo() {
            this.$refs["user"].validate(valid => {
                //如果通过校验开始登录
                if (valid) {
                    // 更新个人数据
                    this.$axios
                        .post("/api/users/updateUserInfo", {
                            user: this.user
                        })
                        .then(res => {
                            if (res.data.code === "001") {
                                this.notifySucceed(res.data.msg);
                            } else {
                                this.notifyError(res.data.msg);
                            }
                        })
                        .catch(err => {
                            return Promise.reject(err);
                        });
                }
                else {
                    return false;
                }
            });
        },
        updatePassword() {
            // 通过element自定义表单校验规则，校验用户输入
            this.$refs["updateUser"].validate(valid => {
                //如果通过校验开始登录
                if (valid) {
                    // 更新个人数据
                    this.$axios
                        .post("/api/users/updatePassword", {
                            user_id: this.$store.getters.getUser.user_id,
                            password: this.updateUser.password,
                            newPassword: this.updateUser.newPassword,
                        })
                        .then(res => {
                            this.$refs["updateUser"].resetFields();
                            if (res.data.code === "001") {
                                this.notifySucceed(res.data.msg);
                                this.logout();
                            } else if (res.data.code === "004") {
                                this.notifyError(res.data.msg);
                            }
                        })
                        .catch(err => {
                            return Promise.reject(err);
                        });
                }
                else {
                    return false;
                }
            });
        },
        // 退出登录
        logout() {
            // 清空本地登录信息
            localStorage.setItem("user", "");
            // 清空vuex登录信息
            this.setUser("");
            this.$router.push({ path: "./" });
        },
    },
    activated() {
        // 获取个人数据
        this.$axios
            .post("/api/users/getUserInfo", {
                user_id: this.$store.getters.getUser.user_id
            })
            .then(res => {
                if (res.data.code === "001") {
                    this.user = res.data.user
                } else {
                    this.notifyError(res.data.msg);
                }
            })
            .catch(err => {
                return Promise.reject(err);
            });
    }
};
</script>
<style>
.collect {
    background-color: #f5f5f5;
}

.collect .collect-header {
    height: 64px;
    background-color: #fff;
    border-bottom: 2px solid #ff6700;
}

.collect .collect-header .collect-title {
    width: 1225px;
    margin: 0 auto;
    height: 64px;
    line-height: 58px;
    font-size: 28px;
}

.collect .content {
    padding: 20px 0;
    width: 1225px;
    margin: 0 auto;
}

.collect .content .goods-list {
    margin-left: -13.7px;
    overflow: hidden;
}

/* 收藏列表为空的时候显示的内容CSS */
.collect .collect-empty {
    width: 1225px;
    margin: 0 auto;
}

.collect .collect-empty .empty {
    height: 300px;
    padding: 0 0 130px 558px;
    margin: 65px 0 0;
    background: url(../assets/imgs/cart-empty.png) no-repeat 124px 0;
    color: #b0b0b0;
    overflow: hidden;
}

.collect .collect-empty .empty h2 {
    margin: 70px 0 15px;
    font-size: 36px;
}

.collect .collect-empty .empty p {
    margin: 0 0 20px;
    font-size: 20px;
}

/* 收藏列表为空的时候显示的内容CSS END */
</style>